<template>
	<div class="material-list">
		<div v-for="(item, index) in list" :key="index" class="material-list-card">
			<img
				v-if="item.resourceType === 2"
				class="material-list-card-image"
				:src="item.coverUrl"
				@click="openPlayer(item.id, item.uploadNo)"
			/>
			<n-image
				v-else
				:src="item.coverUrl"
				:preview-src="item.temporaryUrl"
				:img-props="{ width: 260, height: 160 }"
				style="height: 160px; width: 260px; border-radius: 4px 4px 0px 0px; overflow: hidden"
				object-fit="fill"
			/>
			<div v-if="item.resourceType === 2" class="material-list-card-time">
				{{ getTimeFormat(item.duration) }}
			</div>
			<div class="material-list-card-id">
				<div class="material-list-card-id-num">ID.{{ item.id }}</div>
				<div v-if="item.resourceType === 2" class="material-list-card-id-video">
					<img src="@/assets/images/material/icon_sck_video_play.png" />
				</div>
			</div>
			<div class="material-list-card-pay">
				<div class="material-list-card-pay-sold">已售：{{ item.saleNum }}份</div>
				<div class="material-list-card-pay-money">单价：¥{{ item.priceYuan + '.00' }}</div>
			</div>
			<div class="material-list-card-info">
				<img class="material-list-card-info-image" :src="item.headImgUrl" />
				<div class="material-list-card-info-name">{{ item.name }}</div>
				<div class="material-list-card-info-phone">{{ item.mobile }}</div>
			</div>
		</div>
		<div v-if="list.length === 0" class="no-data" align="center">
			<img src="@/assets/images/img_form_none@3x.png" />
			暂无数据
		</div>
		<DYFXPlay ref="player" :video-url="videoUrl" />
	</div>
</template>

<script>
import DYFXPlay from '@/components/DYFXPlay.vue';
import { useMessage } from 'naive-ui';
import { createAuthInfoUrlByAlgorithmA } from '../../../api/resourceApply';

export default {
	name: 'MaterialList',
	components: { DYFXPlay },
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			showPLay: false,
			videoUrl: undefined,
			message: useMessage()
		};
	},
	computed: {},
	methods: {
		openPlayer(id, code) {
			const params = { resourceApplyNo: code, resourceId: id };
			createAuthInfoUrlByAlgorithmA(params).then((res) => {
				const { code, data } = res;
				if (code === 200 && data.length > 0) {
					this.videoUrl = data;
					this.$refs['player'].openPlay();
				} else {
					this.message.error('获取链接地址失败');
				}
			});
		},
		getTimeFormat(value) {
			let minute = Math.floor(value / 60);
			let second = Math.floor(value % 60);
			minute = minute < 10 ? '0' + minute : minute;
			second = second < 10 ? '0' + second : second;
			return `${minute}:${second}`;
		}
	}
};
</script>

<style lang="less" scoped>
.no-data {
	width: 100%;
	height: 100%;
	text-align: center;
	img {
		width: 128px;
		height: 128px;
		margin: 200px auto 0;
	}
}
.material-list {
	min-width: 1024px;
	padding-bottom: 30px;
	display: flex;
	flex-wrap: wrap;
	max-height: 729px;
	overflow: auto;
	background: white;

	&-card {
		margin-left: 13px;
		margin-top: 10px;
		width: 260px;
		height: 274px;
		background: #fafafa;
		border-radius: 4px;
		border: 1px solid #f0f0f0;
		position: relative;
		&-image {
			width: 260px;
			height: 160px;
			border-radius: 4px 4px 0px 0px;
		}

		&-time {
			position: absolute;
			right: 10px;
			top: 130px;
			width: 44px;
			height: 20px;
			background: #000000;
			font-size: 12px;
			font-weight: 400;
			color: #ffffff;
			border-radius: 4px;
			text-align: center;
			line-height: 20px;
		}

		&-id {
			margin-top: 10px;
			align-items: center;
			height: 19px;
			display: flex;

			&-num {
				font-size: 16px;
				font-weight: bold;
				color: #333333;
				margin-left: 10px;
				width: 187px;
			}

			&-video {
				width: 52px;
				height: 16px;
				border-radius: 4px;
				img {
					width: 52px;
					height: 16px;
				}
			}
		}

		&-pay {
			margin-top: 6px;
			font-size: 12px;
			font-weight: 400;
			color: #999999;
			line-height: 17px;
			display: flex;
			align-items: center;
			&-sold {
				margin-left: 10px;
				width: 100%;
			}
			&-money {
				width: 100%;
			}
		}

		&-info {
			width: 100%;
			height: 48px;
			border-top: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			margin-top: 13px;
			&-image {
				width: 28px;
				height: 28px;
				border-radius: 14px;
				margin-left: 10px;
			}
			&-name {
				font-size: 12px;
				font-weight: 500;
				color: #333333;
				margin-left: 6px;
				width: 100%;
			}
			&-phone {
				width: 100%;
				text-align: right;
				margin-right: 10px;
				font-size: 12px;
				font-weight: 500;
				color: #333333;
			}
		}
	}
}
</style>
